<template>
  <div class="documentEdit">
    <!-- <el-container style="height: calc(100vh - 110px); border: 1px solid #eee">
      <el-aside width="250px" style="background-color: rgb(238, 241, 246)">
        <el-menu default-active="入库管理" @select="jump">
          <el-submenu v-for="(item,i) in menuList" :key="i" :index="item.pname">
            <template slot="title"><i class="el-icon-message" /><span slot="title">{{ item.pname }}</span></template>
            <el-menu-item-group>
              <el-menu-item v-for="(item2,i2) in item.childList" :key="i2" :index="item2.name">{{ item2.name }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside> -->

    <!--  <el-container>
        <el-header style="text-align: left; font-size: 22px">
          <span>{{ title }}</span>
        </el-header>
        <el-main>
          <helpDoc />
        </el-main>
      </el-container>
    </el-container> -->
    <el-radio
      v-for="item in sysList"
      :key="item.id"
      v-model="checked"
      class="radios"
      :label="item.id"
      @change="handleCheckChange"
    >
      {{ item.name }}
    </el-radio>
    <mavon-editor
      ref="md"
      v-model="content"
      class="md"
      :subfield="prop.subfield"
      :default-open="prop.defaultOpen"
      :toolbars-flag="prop.toolbarsFlag"
      :editable="prop.editable"
      :scroll-style="prop.scrollStyle"
      :box-shadow="prop.boxShadow"
      @change="handelChange"
      @imgAdd="handleImgAdd"
      @save="handleSave"
    />
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import markdownMixin from '@/utils/markdownMixin'
import { findSysList } from '@/api/baseInfo/authority/sys'
import { helpDocument } from '@/api/maintenance/helpdocumentation'
import { showNotice } from '@/utils/toolclass'

export default {
  components: { mavonEditor },
  mixins: [markdownMixin],
  data() {
    return {
      title: '',
      content: '',
      sysList: [],
      html: '',
      img: '',
      checked: 1,
      id: 1,
      prop: {
        subfield: false, // 单双栏模式
        defaultOpen: 'edit', // edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: true, // 是否可编辑编辑
        toolbarsFlag: true, // 顶部菜单
        scrollStyle: true,
        boxShadow: false // 边框
      },
      menuList: [
        {
          pname: '首页',
          childList: [
            { name: '操作指南' }
          ]
        },
        {
          pname: '单位备案',
          childList: [
            { name: '素材管理' },
            { name: '广告制作' },
            { name: '播放计划' },
            { name: '广告屏系统' }
          ]
        },
        {
          pname: '电梯投保',
          childList: [
            { name: '投保查询' }
          ]
        },
        {
          pname: '基础管理',
          childList: [
            { name: '往来单位' },
            { name: '设备管理' },
            { name: '厂家管理' },
            { name: 'BOM' }
          ]
        },
        {
          pname: '电梯管理',
          childList: [
            { name: '电梯绑定' },
            { name: '电梯导入' },
            { name: '电梯审核' },
            { name: '备案申请' }
          ]
        }
      ]
    }
  },
  // computed: {
  //   prop() {
  //     const data = {
  //       subfield: false, // 单双栏模式
  //       defaultOpen: 'preview', // edit： 默认展示编辑区域 ， preview： 默认展示预览区域
  //       editable: true, // 是否可编辑编辑
  //       toolbarsFlag: true, // 顶部菜单
  //       scrollStyle: true,
  //       boxShadow: false// 边框
  //     }
  //     return data
  //   }
  // },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/docManage/documentEdit' }))
    this.getSysList()
  },
  methods: {
    handleSave() {
      const form = new FormData()
      this.img === '' ? form.append('file', this.html) : form.append('file', this.img)
      form.append('id', this.id)
      console.log(form.get('file'))
      console.log(form.get('id'))
      helpDocument(form).then(res => {
        if (res.code === '000000') {
          // console.log(res)
          showNotice('success', '提示', '保存成功')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '保存失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
      // console.log(e)
    },
    handleImgAdd(p, file) {
      // console.log(file)
      this.img = file
    },
    // 生成html文件
    handelChange(v, r) {
      // console.log(r)
      // this.html = new Blob([r], { 'type': 'text\/xml' })
      this.html = r
    },
    handleCheckChange(v) {
      // console.log(v)
      this.id = v
    },
    jump(index, path) {
      this.title = index
      // console.log(path)
    },
    sortData(list) {
      for (var i = 1; i < list.length; i++) {
        for (var j = 0; j < list.length - 1; j++) {
          if (list[j].id > list[j + 1].id) {
            var temp = list[j]
            list[j] = list[j + 1]
            list[j + 1] = temp
          }
        }
      }
      // console.log(list)// 此时lists就是按照积分高低排序之后的列表
      return list
    },
    getSysList() {
      findSysList('', '', 1, 100).then(res => {
        if (res.code === '000000') {
          this.sysList = this.sortData(res.data)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.documentEdit {
  .el-header {
    background-color: var(--panelWrapTitle);
    color: #fff;
    line-height: 60px;
  }
  .radios {
    margin: 20px;
  }
  .el-aside {
    color: #333;
  }
}

</style>

